<template>
	<view>
		<view class="top" >
			 <image class="loginImg" src="/static/iconfont/login.png"  mode="widthFix" ></image>
			 <text class="title" style="color: white;font-weight: bold; ">精准落码</text>
		</view>
		 <view class="box">
		      <view class="main">
		        <view class="box2">
		          <view :class="navId=='login'?'active':'unactive'" @click="itemclick('login')">登录
		            <view class="line" v-show="navId=='login'">
		              <view class="y"></view>
		            </view>
		          </view>
		      <!--    <view :class="navId=='register'?'active':'unactive'" @click="itemclick('register')">注册
		            <view class="line" v-show="navId=='register'">
		              <view class="y"></view>
		            </view>
		          </view> -->
		        </view>
		        <!-- 登录 -->
		        <view class="box3" v-show="navId=='login'">
		          <view class="items">
		              <image src="/static/iconfont/my.png" mode="widthFix" style="width: 40rpx;margin-right:16rpx ;"></image>
		            <input class="uni-input"  focus placeholder="请输入手机号码" v-model="submitParams.username" />
		          </view>
				  <view class="items" style="margin-top: 30rpx;justify-content: space-between;">
				    <view class="" style="display: flex;justify-content: center;">
				      <image src="/static/iconfont/password.png" mode="widthFix" style="width: 40rpx;margin-right:16rpx ;"></image>
				      <input class="uni-input input2" maxlength="12" @input="handleInput" placeholder="请输入密码" v-model="submitParams.password">
				    </view>
				  </view>
				  <view class="items2">
						<text style="font-size: 25rpx; color:blue" @click="forgotPassword()">忘记密码</text>
						
				  </view>
					
		          <view class="submt1" style="position: relative;left: 0;top: 0;" @click="login()">
		            <text class="submitValue">登录</text>
		          </view>
		        </view>
		        <!-- 注册 -->
	<!-- 	        <view class="box3" v-show="navId=='register'">
						<view class="items">
						    <image src="/static/iconfont/my.png" mode="widthFix" style="width: 40rpx;margin-right:16rpx ;"></image>
						  <input class="uni-input" focus placeholder="请输入手机号码" v-model="submitParams.username" />
						</view>
						<view class="items" style="margin-top: 30rpx;justify-content: space-between;">
						  <view class="" style="display: flex;justify-content: center;">
						    <image src="/static/iconfont/password.png" mode="widthFix" style="width: 40rpx;margin-right:16rpx ;"></image>
						    <input class="uni-input input2" maxlength="12" @input="handleInput" placeholder="请输入密码" v-model="submitParams.password">
						  </view>
						   <text style="color: red; font-size: 25rpx;">6-12位数字字母</text>
						</view>
						<view class="items" style="margin-top: 30rpx;justify-content: space-between;">
						  <view class="" style="display: flex;justify-content: center;">
						    <image src="/static/iconfont/code.png" mode="widthFix" style="width: 40rpx;margin-right:16rpx ;"></image>
						    <input class="uni-input input2" maxlength="4" placeholder="请输入验证码" v-model="submitParams.yzm">
						  </view>
						  <view class="yzm" @click="getRegisterYZM(yanzhengma)">{{registerYanzhengma}}</view>
						</view>
						<view class="submt" style="position: relative;left: 0;top: 0;" @click="register()">
						  <text class="submitValue">注册</text>
						</view>
		        </view> -->
		      </view>
		    </view>
			<view style=" display: flex; justify-content:center; margin-top: 16rpx;">
				<text style="font-size: 25rpx; color: rgba(132, 132, 135, 1);">精准落码 客服电话：{{telephone}}</text>
			</view>
	<!-- 		<view>
				<view style="margin-left: 80rpx;">
					<checkbox-group @change="checkboxChange">
					  <label class="checkbox-container">
					    <checkbox value="true" :checked="value"/>
					    <text>我已阅读并同意</text><text style="color:burlywood" @tap="goServiceProtocol">《服务协议与隐私政策》</text>
					  </label>
					</checkbox-group>  
				</view>
			   
			</view> -->
			<view style=" display: flex; justify-content:center; margin-top: 16rpx;">
				<text  style="font-size: 25rpx; color: rgba(132, 132, 135, 1)">第一次输入的密码即为登陆密码</text>
				
			</view>
			
	</view>

</template>

<script>
	const app = getApp();
	var urlPrefix = app.globalData.urlPrefix;
	export default {
		data() {
			return {
				    value:true,
					telephone:null,
			        navId: 'login',
			        yanzhengma: '获取验证码',
			        registerYanzhengma: '获取验证码',
			        submitParams: {
			          username: "",
					  password:"",
			          yzm: ""
			        },
			        token: "",
				
		};
		},
		 mounted() {
		      // 判断登录状态。已登录就跳转到首页
		      this.getToken();
		      if (this.token != '' && this.token != null) {
		        // 跳转主页
		        uni.switchTab({
		          url: '/pages/index/index'
		        });
		      } else {
		        this.getAccount();
		      }
		},
	    onLoad: function () {
			 let that = this;
			  uni.request({
				url: urlPrefix + '/api/app/appUser/telephone',
				method: 'GET',
				header: {
					'content-type': 'application/json',
				},
				success: function (res) {
					that.setData({
					    telephone: res.data.datas
					});
				}
			});
		},
		methods: {
			// 服务协议
			  goServiceProtocol() {
			    // 这里的url需要替换为实际的服务协议地址
			    const url = 'https://www.linnaiwen.xyz/';
			    // 使用uni.navigateTo跳转到网页
			    uni.navigateTo({
			      url: '/pages/webview/webview?url=' + encodeURIComponent(url)
			    });
			  },
			checkboxChange(e) {
				this.value = e.detail.value[0]
			},
			handleInput(event) {
			  
			   const o = event.detail.value
				const inputRule = /[^\w_]/g
				if(inputRule.test(o)){
						uni.showToast({
							title: '只能输入数字、字母或下划线',
							icon: 'none',
							duration: 2000
						})
				}
				this.$nextTick(() => {
					this.submitParams.password = o.replace(inputRule, '');
					if (this.submitParams.password == '') {
						return
					} else {
						if(inputRule.test(o)){
								uni.showToast({
									title: '只能输入数字、字母或下划线',
									icon: 'none',
									duration: 2000
								})
						}
					}
				}) 
			},
		
			getToken: function() {
			        // 本地缓存获取token
			        this.token = uni.getStorageSync('token');
			},
			
			getAccount: function() {
			        // 本地缓存获取
			        let username = uni.getStorageSync('username');
			        if (username && username != '') {
			          this.submitParams.username = username;
			        }
			},
		
		
			//切换登录or注册
			itemclick(value) {
				this.navId = value
			},

			getRegisterYZM(yzm) {
				if (this.registerYanzhengma == '获取验证码') {
				  const username = this.submitParams.username
				  if (!/^1[3456789]\d{9}$/.test(username)) {
				      uni.showToast({
				          title: '请输入正确的手机号',
				          icon: 'none'
				      });
				      return;
				  }
					let time = 45
					let timer = setInterval(() => {
						this.registerYanzhengma = `${time--}秒后重试`
						if (time == -1) {
						  clearInterval(timer)
						  this.registerYanzhengma = '获取验证码'
						}
					}, 1000)
				   uni.request({
						url: urlPrefix + '/api/app/appUser/verificationRegisterCode?username=' + this.submitParams.username,
						method: 'GET',
						header: {
							'content-type': 'application/json',
						},
						success: function (res) {
							if(res.data.resp_code == 1){
								uni.showToast({
									title: res.data.resp_msg,
									icon: 'none'
								});
						    }
						}
				  	});
			
				}
			},
			
			
			forgotPassword(){
				uni.navigateTo({
					url: '/pages/forgotPassword/forgotPassword'
				})
			},
	
			//登录
		  login() {
			const params = this.submitParams
			if(params.username == '' || params.username == null){
				uni.showToast({
					title: '请输入手机号',
					icon: 'none',
					duration: 2000
				})
				return;
			} 
			
			if(params.password=='' || params.password== null){
				console.log("panduan")
				uni.showToast({
					title: '请输入密码',
					icon: 'none',
					duration: 2000
				})
				return;
			}
			
			if(!this.value){
				uni.showToast({
					title: '请认真阅读并同意下方《服务协议与隐私政策》',
					icon: 'none',
					duration: 2000
				})
				return;
			}
			
				
			 uni.request({
				url: urlPrefix + '/api/app/appUser/login',
				method: 'POST',
				data: {
					username: params.username,
					password: params.password
				},
				header: {
					'content-type': 'application/json'
				},
				success: function (res) {
					if(res.data.resp_code == 1){
						uni.showToast({
							title: res.data.resp_msg,
							icon: 'none'
						});
					}
					if(res.data.resp_code == 0){
						uni.setStorageSync('token', res.data.datas.token);
						uni.setStorageSync('userId', res.data.datas.userId);
						uni.setStorageSync('username', params.username);
						// 跳转路由
						// uni.switchTab({
						// 	url: '/pages/index/index'
						// });
						  uni.showToast({
						    title: '登录成功',
						    icon: 'success',
						    duration: 2000,
						    complete: function() {
						      // 2秒后跳转到首页
						      setTimeout(function() {
						        uni.switchTab({
						          url: '/pages/index/index'
						        });
						      }, 2000);
						    }
						  });
					}
				}
			 });
	
			
		  },
		  
		  
		  register() {
		  			const params = this.submitParams
					if(params.username == '' || params.username == null){
						uni.showToast({
							title: '请输入手机号',
							icon: 'none',
							duration: 2000
						})
						return;
					} 		
					
					if(params.password=='' || params.password== null){
						uni.showToast({
							title: '请输入密码',
							icon: 'none',
							duration: 2000
						})
						return;
					}
					if(params.yzm=='' || params.yzm== null){
						uni.showToast({
							title: '请输入验证码',
							icon: 'none',
							duration: 2000
						})
						return;
					}
		  		if(!this.value){
		  			uni.showToast({
		  				title: '请认真阅读并同意下方《服务协议与隐私政策》',
		  				icon: 'none',
		  				duration: 2000
		  			})
					return;
		  		}
		  				
		  			 uni.request({
		  				url: urlPrefix + '/api/app/appUser/register',
		  				method: 'POST',
		  				data: {
		  					username: params.username,
		  					yzm: params.yzm,
		  					password: params.password
		  				},
		  				header: {
		  					'content-type': 'application/json',
		  				},
		  				success: function (res) {
		  					if(res.data.resp_code == 1){
		  						uni.showToast({
		  							title: res.data.resp_msg,
		  							icon: 'none'
		  						});
		  					}
		  					if(res.data.resp_code == 0){
		  						uni.setStorageSync('token', res.data.datas.token);
		  						uni.setStorageSync('userId', res.data.datas.userId);
		  						uni.setStorageSync('username', params.username);
		  						// 跳转路由
								uni.showToast({
								  title: '注册成功，正在为您自动登录',
								  icon: 'success',
								  duration: 2000,
								  complete: function() {
								    // 2秒后跳转到首页
								    setTimeout(function() {
								      uni.switchTab({
								        url: '/pages/index/index'
								      });
								    }, 2000);
								  }
								});
		  					}
		  				}
		  			 });
		  	
		  			
		  },
			
		}
	}
</script>

<style lang="scss">
@import './login.scss';
</style>
